<template>
    <div class="warp">
        <div class="circleprogress-bottom-no50">
        </div>
         <div class="circleprogress-top-no50"></div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            percent: 60
        }
    }
}
</script>

<style>
.warp{
    position: relative;
    width: 200px;
    height: 200px;
}
.circleprogress-bottom-no50 {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border-right: 20px solid red;
    border-top: 20px solid red;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    position: absolute;
    top: 0px;
    left: 0px;   
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);        /*修改此参数实现进度  0% - 45deg  25% = -45deg   50% - -135deg */
}

.circleprogress-top-no50{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border-right: 20px solid white;
    border-top: 20px solid white;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    position: absolute;
    top: 0px;
    left: 0px;   
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(45deg);
}

/*

<div class="circleProgress_wrapper">
            <div class="wrapper right">
                <div class="circleProgress rightcircle"></div>
            </div>
            <div class="wrapper left">
                <div class="circleProgress leftcircle"></div>
            </div>
        </div>

*/

.circleProgress_wrapper {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
    border: 1px solid #ddd;
}

.wrapper {
    width: 100px;
    height: 200px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

.circleProgress {
    width: 160px;
    height: 160px;
    border: 20px solid rgb(232, 232, 12);
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
}

.rightcircle {
    border-top: 20px solid green;
    border-right: 20px solid green;
    right: 0;
    -webkit-animation: circleProgressLoad_right 5s linear infinite;
}

.leftcircle {
    border-bottom: 20px solid green;
    border-left: 20px solid green;
    left: 0;
    -webkit-animation: circleProgressLoad_left 5s linear infinite;
}

@-webkit-keyframes circleProgressLoad_right {
    0% {
        border-top: 20px solid #ED1A1A;
        border-right: 20px solid #ED1A1A;
        -webkit-transform: rotate(45deg);
    }
    50% {
        border-top: 20px solid rgb(232, 232, 12);
        border-right: 20px solid rgb(232, 232, 12);
        border-left: 20px solid rgb(81, 197, 81);
        border-bottom: 20px solid rgb(81, 197, 81);
        -webkit-transform: rotate(225deg);
    }
    100% {
        border-left: 20px solid green;
        border-bottom: 20px solid green;
        -webkit-transform: rotate(225deg);
    }
}

@-webkit-keyframes circleProgressLoad_left {
    0% {
        border-bottom: 20px solid #ED1A1A;
        border-left: 20px solid #ED1A1A;
        -webkit-transform: rotate(45deg);
    }
    50% {
        border-bottom: 20px solid rgb(232, 232, 12);
        border-left: 20px solid rgb(232, 232, 12);
        border-top: 20px solid rgb(81, 197, 81);
        border-right: 20px solid rgb(81, 197, 81);
        -webkit-transform: rotate(45deg);
    }
    100% {
        border-top: 20px solid green;
        border-right: 20px solid green;
        border-bottom: 20px solid green;
        border-left: 20px solid green;
        -webkit-transform: rotate(225deg);
    }
}
</style>
